import { JavascriptGenerator, javascriptGenerator } from "blockly/javascript";
import { Tanslate } from "./translate";
import * as Blockly from 'blockly/core';
import { getValue } from "./com";
export namespace Dom {
    const blocks = [
        {
            "key": "element_attribute",
            "message0": "%1",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["ID", "id"],
                        ["%{element_class}", "class"],
                        ["%{element_title}", "title"],
                        ["%{element_name}", "name"],
                        ["%{element_html}", "innerHTML"],
                        ["%{element_text}", "innerText"],
                        ["%{element_style}", "style"],
                        ["%{element_hidden}", "hidden"],
                        ["%{element_src}", "src"],
                        ["%{element_src_object}", "srcObject"],
                        ["%{element_draggable}", "draggable"],
                        ["%{element_contenteditable}", "contenteditable"],
                        ["%{element_href}", "href"],
                        ["%{element_width}", "width"],
                        ["%{element_height}", "height"],
                        ["%{element_disabled}", "disabled"],
                        ["%{element_value}", "value"],
                        ["%{element_checked}", "checked"],
                        ["%{element_autoplay}", "autoplay"],
                        ["%{element_controls}", "controls"],
                        ["%{element_loop}", "loop"],
                        ["%{element_muted}", "muted"]
                    ]
                }
            ],
            "output": "element_attribute",
            "colour": 100,
            "tooltip": "%{element_attribute}"
        },
        {
            "key": "attribute_selector",
            "message0": "%{when} %{element} %1 = %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "attribute",
                    "check": ["element_attribute", "String"]
                },
                {
                    "type": "input_value",
                    "name": "value",
                    "check": ["String", "Number"]
                }
            ],
            "output": "attribute_selector",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "get_element",
            "message0": "%{get_element} %1",
            "args0": [
                {
                    "type": "input_value",
                    "name": "condition",
                    "check": ["attribute_selector", "String"]
                }
            ],
            "output": "element",
            "tooltip": "%{get_element_tips}",
            "colour": 100
        },
        {
            "key": "show_element",
            "message0": "%1 %{show_element} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": 'element'
                },
                {
                    "type": "field_checkbox",
                    "name": "show",
                    "checked": true
                },
            ],
            "nextStatement": null,
            "previousStatement": null,
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "show_element_with_var",
            "message0": "%1 %{show_element} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": 'element'
                },
                {
                    "type": "input_value",
                    "name": "show",
                    "check": "Boolean"
                },
            ],
            "nextStatement": null,
            "previousStatement": null,
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_object",
            "message0": "%{element_object}",
            "output": "element",
            "colour": 100,
            "tooltip": "%{element_object_tips}",
        },
        {
            "key": "element_title",
            "message0": "%{element_page_title}",
            "output": "String",
            "colour": 100,
            "tooltip": "%{element_title_tips}",
        },
        {
            "key": "element_body",
            "message0": "%{element_body}",
            "output": "element",
            "colour": 100,
            "tooltip": "%{element_body_tips}",
        },
        {
            "key": "get_element_all",
            "message0": "%{get_element_all} %1",
            "args0": [
                {
                    "type": "input_value",
                    "name": "condition",
                    "check": ["attribute_selector", "String"]
                }
            ],
            "output": "Array",
            "tooltip": "%{get_element_all_tips}",
            "colour": 100
        },
        {
            "key": "set_element",
            "message0": "%{set_element} %1 %{attribute} %2 %{to} %3",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": "element"
                },
                {
                    "type": "input_value",
                    "name": "attribute",
                    "check": ["element_attribute", "String"]
                },
                {
                    "type": "input_value",
                    "name": "value"
                }
            ],
            "colour": 100,
            "nextStatement": null,
            "previousStatement": null,
            "inputsInline": true,
            "attributes": ""
        },
        {
            "key": "get_element_attribute",
            "message0": "%{from} %1 %{get} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": "element"
                },
                {
                    "type": "input_value",
                    "name": "attribute",
                    "check": ["element_attribute", "String"]
                },
            ],
            "colour": 100,
            "output": null,
            "inputsInline": true,
            "attributes": ""
        },
        {
            "key": "element_type",
            "message0": "%1",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["%{element_div}", "div"],
                        ["%{element_span}", "span"],
                        ["%{element_audio}", "audio"],
                        ["%{element_video}", "video"],
                        ["%{element_canvas}", "canvas"],
                        ["%{element_p}", "p"],
                        ["%{element_h1}", "h1"],
                        ["%{element_h2}", "h2"],
                        ["%{element_h3}", "h3"],
                        ["%{element_h4}", "h4"],
                        ["%{element_h5}", "h5"],
                        ["%{element_h6}", "h6"],
                        ["%{element_a}", "a"],
                        ["%{element_img}", "img"],
                        ["%{element_input}", "input"],
                        ["%{element_button}", "button"],
                        ["%{element_textarea}", "textarea"],
                        ["%{element_select}", "select"],
                        ["%{element_option}", "option"],
                        ["%{element_table}", "table"],
                        ["%{element_tr}", "tr"],
                        ["%{element_td}", "td"],
                        ["%{element_th}", "th"],
                    ]
                }
            ],
            "output": "element_type",
            'tooltip': "%{element_type_tips}",
            "colour": 100
        },
        {
            "key": "remove_element",
            "message0": "%{remove_element} %1",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                }
            ],
            "nextStatement": null,
            "previousStatement": null,
            "colour": 100
        },
        {
            "key": "new_element",
            "message0": "%{new_element} %1",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": ["element_type", "String"]
                }
            ],
            "output": "element",
            "colour": 100
        },
        {
            "key": "set_shadow_element",
            "message0": "%{set} %1 %{to} %2 %{shadow_element}",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                },
                {
                    "type": "field_dropdown",
                    "name": "open",
                    "options": [
                        ["%{shadow_open}", "open"],
                        ["%{shadow_close}", "close"]
                    ]
                }
            ],
            "nextStatement": null,
            "previousStatement": null,
            "colour": 100
        },
        {
            "key": "insert_element",
            "message0": "%{insert_element} %1 %{into} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "child",
                    "check": "element"
                },
                {
                    "type": "input_value",
                    "name": "father",
                    "check": "element"
                },
            ],
            "nextStatement": null,
            "previousStatement": null,
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "dom_size",
            "message0": "%1 %2",
            "args0": [
                {
                    "type": "field_number",
                    "name": "value",
                    "value": "1",
                    "check": "Number"
                },
                {
                    "type": "field_dropdown",
                    "name": "unit",
                    "options": [
                        ["px", "px"],
                        ["em", "em"],
                        ["rem", "rem"],
                        ["vw", "vw"],
                        ["vh", "vh"],
                        ["%", "%"]
                    ]
                }
            ],
            "output": "dom_size",
            "colour": 100
        },
        {
            "key": "element_border",
            "message0": "%{element_border}: %{colors} %1 %{top} %2 %{bottom} %3 %{left} %4 %{right} %5",
            "args0": [
                {
                    "type": "input_value",
                    "name": "color",
                    "check": "Colour"
                },
                {
                    "type": "input_value",
                    "name": "top",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "bottom",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "left",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "right",
                    "check": "dom_size"
                },
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_radius",
            "message0": "%{element_radius}: %{top} %1 %{bottom} %2 %{left} %3 %{right} %4",
            "args0": [
                {
                    "type": "input_value",
                    "name": "top",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "bottom",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "left",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "right",
                    "check": "dom_size"
                },
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_color",
            "message0": "%{element} %{element_foreground} %1 %{element_background} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "color",
                    "check": "Colour"
                },
                {
                    "type": "input_value",
                    "name": "background"
                }
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_padding",
            "message0": "%{element_padding}: %{top} %1 %{bottom} %2 %{left} %3 %{right} %4",
            "args0": [
                {
                    "type": "input_value",
                    "name": "top",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "bottom",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "left",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "right",
                    "check": "dom_size"
                },
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_margin",
            "message0": "%{element_margin}: %{top} %1 %{bottom} %2 %{left} %3 %{right} %4",
            "args0": [
                {
                    "type": "input_value",
                    "name": "top",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "bottom",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "left",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "right",
                    "check": "dom_size"
                },
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_position",
            "message0": "%{element_position}: %{position_type} %1 %{top} %2 %{bottom} %3 %{left} %4 %{right} %5",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "type",
                    "options": [
                        ["%{element_static}", "static"],
                        ["%{element_fixed}", "fixed"],
                        ["%{element_absolute}", "absolute"],
                        ["%{element_relative}", "relative"],
                        ["%{element_sticky}", "sticky"]
                    ]
                },
                {
                    "type": "input_value",
                    "name": "top",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "bottom",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "left",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "right",
                    "check": "dom_size"
                },
            ],
            "output": "String",
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_display",
            "message0": "%{element_display} %1",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["%{element_block}", "block"],
                        ["%{element_inline}", "inline"],
                        ["%{element_inline_block}", "inline-block"],
                        ["%{element_none}", "none"],
                        ["%{element_flex}", "flex"],
                        ["%{element_grid}", "grid"]
                    ]
                }
            ],
            "output": "String",
            "colour": 100
        },
        {
            "key": "element_display_flex",
            "message0": "%{element_display_flex} \n %{justify_items} %1 \n %{align_items} %2 \n %{justify_content} %3 \n %{align_content} %4 \n %{flex_direction} %5",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "justify_items",
                    "options": [
                        ["%{element_flex_items_stretch}", "stretch"],
                        ["%{element_flex_items_center}", "center"],
                        ["%{element_flex_items_start}", "start"],
                        ["%{element_flex_items_end}", "end"],
                    ]
                },
                {
                    "type": "field_dropdown",
                    "name": "align_items",
                    "options": [
                        ["%{element_flex_items_stretch}", "stretch"],
                        ["%{element_flex_items_center}", "center"],
                        ["%{element_flex_items_start}", "start"],
                        ["%{element_flex_items_end}", "end"],
                    ]
                },
                {
                    "type": "field_dropdown",
                    "name": "justify_content",
                    "options": [
                        ["%{element_flex_content_spacebetween}", "space-between"],
                        ["%{element_flex_content_spacearound}", "space-around"],
                        ["%{element_flex_content_spaceevenly}", "space-evenly"],
                        ["%{element_flex_items_center}", "center"],
                        ["%{element_flex_items_start}", "start"],
                        ["%{element_flex_items_end}", "end"],
                    ]
                },
                {
                    "type": "field_dropdown",
                    "name": "align_content",
                    "options": [
                        ["%{element_flex_content_spacebetween}", "space-between"],
                        ["%{element_flex_content_spacearound}", "space-around"],
                        ["%{element_flex_content_spaceevenly}", "space-evenly"],
                        ["%{element_flex_items_center}", "center"],
                        ["%{element_flex_items_start}", "start"],
                        ["%{element_flex_items_end}", "end"],
                    ]
                },
                {
                    "type": "field_dropdown",
                    "name": "flex_direction",
                    "options": [
                        ["%{element_column}", "row"],
                        ["%{element_row}", "column"],
                    ]
                }
            ],
            "output": "String",
            "colour": 100
        },
        {
            "key": "element_display_grid",
            "message0": "%{element_display_grid} \n %{element_column} %1 ",
            "args0": [
                {
                    "type": "field_number",
                    "name": "value",
                    "value": "1",
                    "check": "Number"

                }
            ],
            "output": "Number",
            "colour": 100
        },
        {
            "key": "element_call",
            "message0": "%{element_call} %{element} %1 %{element_call_name} %2 %{element_call_args} %3",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": "element"
                },
                {
                    "type": "field_dropdown",
                    "name": "name",
                    "options": [
                        ["%{element_focus}", "focus"],
                        ["%{element_blur}", "blur"],
                        ["%{element_click}", "click"],
                        ["%{element_remove}", "remove"],
                        ["%{element_append}", "append"],
                        ["%{element_play}", "play"],
                        ["%{element_pause}", "pause"],
                        ["%{element_fastSeek}", "fastSeek"],
                        ['%{element_getSelection}','getSelection']
                    ]
                },
                {
                    "type": "input_value",
                    "name": "args",
                    "check": "Array"
                }
            ],
            "output": null,
            "nextStatement": null,
            "previousStatement": null,
            "inputsInline": true,
            "colour": 100
        },
        {
            "key": "element_event",
            "message0": "%{when} %1 %2 %{element_event_args} %3",
            "args0": [
                {
                    "type": "input_value",
                    "name": "element",
                    "check": "element"
                },
                {
                    "type": "field_dropdown",
                    "name": "event",
                    "options": [
                        ["%{event_load}", "load"],
                        ["%{event_error}", "error"],
                        ["%{event_change}", "change"],
                        ["%{event_input}", "input"],
                        ["%{event_focus}", "focus"],
                        ["%{event_blur}", "blur"],
                        ["%{event_click}", "click"],
                        ["%{event_keydown}", "keydown"],
                        ["%{event_keyup}", "keyup"],
                        ["%{event_keypress}", "keypress"],
                        ["%{event_scroll}", "scroll"],
                        ["%{event_resize}", "resize"],
                        ["%{event_wheel}", "wheel"],
                        ["%{mouse_down}", "mousedown"],
                        ["%{mouse_up}", "mouseup"],
                        ["%{mouse_move}", "mousemove"],
                        ["%{event_contextmenu}", "contextmenu"],
                        ["%{event_dblclick}", "dblclick"],
                        ["%{event_loadedmetadata}", "loadedmetadata"],
                        ["%{event_wheel}", "wheel"],
                        ["%{event_drop}", "drop"],
                        ["%{event_dragover}", "dragover"],
                        ["%{event_dragenter}", "dragenter"],
                        ["%{event_dragleave}", "dragleave"],
                        ["%{event_dragend}", "dragend"],
                        ["%{event_dragstart}", "dragstart"],
                        ["%{event_drag}", "drag"],
                        ['%{event_selectionchange}','selectionchange']
                    ]
                },
                {
                    "type": "field_variable",
                    "name": "args",
                    "variable": "event"
                },
            ],
            "message1": "%{do} %1",
            "args1": [
                {
                    'type': 'input_statement',
                    'name': 'body0',
                },
            ],
            "nextStatement": null,
            "previousStatement": null,
            "colour": 100
        },
        {
            "key": "element_event_object",
            "message0": "%{from} %{element_event_object} %1 %{get} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                },
                {
                    "type": "field_dropdown",
                    "name": "key",
                    "options": [
                        ["%{element_event_target}", "target"],
                        ["%{element_event_currentTarget}", "currentTarget"],
                        ["%{element_event_type}", "type"],
                        ["%{element_event_button}", "button"],
                        ["%{element_event_key}", "key"],
                        ["%{element_event_code}", "code"],
                        ["%{element_event_preventDefault}", "preventDefault"],
                        ["%{element_event_stopPropagation}", "stopPropagation"],
                        ["%{element_event_clientX}", "clientX"],
                        ["%{element_event_clientY}", "clientY"],
                        ["%{element_event_movementX}", "movementX"],
                        ["%{element_event_movementY}", "movementY"],
                        ["%{element_event_offsetX}", "offsetX"],
                        ["%{element_event_offsetY}", "offsetY"],
                        ["%{element_event_pageX}", "pageX"],
                        ["%{element_event_pageY}", "pageY"],
                        ["%{element_event_screenX}", "screenX"],
                        ["%{element_event_screenY}", "screenY"],
                        ["%{element_event_x}", "x"],
                        ["%{element_event_y}", "y"],
                        ["%{element_event_dataTransfer_files}", "dataTransfer.files"],
                    ]
                }
            ],
            "output": ["Object", "String", "Number", "Boolean", "Array", "Null"],
            "colour": 100
        },
        {
            "key": "get_computed_style",
            "message0": "%1 %{get_computed_style}",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                }
            ],
            "output": "Object",
            "colour": 100
        },
        {
            "key": "get_bounding_rect",
            "message0": "%1 %{get_bounding_rect}",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                }
            ],
            "output": "bounding_rect",
            "colour": 100
        },
        {
            "key": "bounding_rect",
            "message0": "%{from} %{bounding_rect} %1 %{get} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "value",
                    "check": "element"
                },
                {
                    "type": "field_dropdown",
                    "name": "key",
                    "options": [
                        ["%{get_bounding_rect_left}", "left"],
                        ["%{get_bounding_rect_top}", "top"],
                        ["%{get_bounding_rect_right}", "right"],
                        ["%{get_bounding_rect_bottom}", "bottom"],
                        ["%{get_bounding_rect_width}", "width"],
                        ["%{get_bounding_rect_height}", "height"]
                    ]
                }
            ],
            "output": "bounding_rect",
            "colour": 100
        },
        {
            "key": "style_opacity",
            "message0": "%{style_opacity} %1 ",
            "args0": [
                {
                    "type": "field_number",
                    "name": "value",
                    "value": 1,
                    "check": "element"

                }
            ],
            "output": "style_opacity",
            "colour": 100
        },
        {
            "key": "style_visibility",
            "message0": "%{style_visibility} %1 ",
            "args0": [
                {
                    "type": "field_checkbox",
                    "name": "value",
                    "checked": true
                }
            ],
            "output": "style_visibility",
            "colour": 100
        },
        {
            "key": "style_z_index",
            "message0": "%{style_z_index} %1 ",
            "args0": [
                {
                    "type": "field_number",
                    "name": "value",
                    "value": 0,
                    "check": "Number"

                }
            ],
            "output": "style_z_index",
            "colour": 100
        },
        {
            "key": "style_overflow",
            "message0": "%{style_overflow} %1 ",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["%{auto}", "auto"],
                        ["%{visible}", "visible"],
                        ["%{hidden}", "hidden"],
                        ["%{scroll}", "scroll"],
                    ]
                }
            ],
            "output": "style_z_index",
            "colour": 100
        },
        {
            "key": "style_filter",
            "message0": "%{style_filter} %1 ",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["%{blur}2px", "blur(2px)"],
                        ["%{blur}6px", "blur(6px)"],
                        ["%{blur}16px", "blur(16px)"],
                        ['%{invert}10%','invert(0.1)'],
                        ['%{invert}30%','invert(0.3)'],
                        ['%{invert}70%','invert(0.7)'],
                        ['%{invert}100%','invert(1)'],
                        ["%{grayscale}20%", "grayscale(20%)"],
                        ["%{grayscale}50%", "grayscale(50%)"],
                        ["%{grayscale}100%", "grayscale(100%)"],
                        ["%{hue_rotate}30⁰", "hue-rotate(30deg)"],
                        ["%{hue_rotate}90⁰", "hue-rotate(90deg)"],
                        ["%{hue_rotate}180⁰", "hue-rotate(180deg)"]
                    ]
                }
            ],
            "output": "style_filter",
            "colour": 100
        },
        {
            "key": "backdrop_filter",
            "message0": "%{backdrop_filter} %1 ",
            "args0": [
                {
                    "type": "field_dropdown",
                    "name": "value",
                    "options": [
                        ["%{blur}2px", "blur(2px)"],
                        ["%{blur}6px", "blur(6px)"],
                        ["%{blur}16px", "blur(16px)"],
                        ['%{invert}10%','invert(0.1)'],
                        ['%{invert}30%','invert(0.3)'],
                        ['%{invert}70%','invert(0.7)'],
                        ['%{invert}100%','invert(1)'],
                        ["%{grayscale}20%", "grayscale(20%)"],
                        ["%{grayscale}50%", "grayscale(50%)"],
                        ["%{grayscale}100%", "grayscale(100%)"],
                        ["%{hue_rotate}30⁰", "hue-rotate(30deg)"],
                        ["%{hue_rotate}90⁰", "hue-rotate(90deg)"],
                        ["%{hue_rotate}180⁰", "hue-rotate(180deg)"]
                    ]
                }
            ],
            "output": "style_filter",
            "colour": 100
        },
        {
            "key": "style_size",
            "message0": "%{style_size} \n %{element_width} %1 %{element_height} %2 ",
            "args0": [
                {
                    "type": "input_value",
                    "name": "width",
                    "check": "dom_size"
                },
                {
                    "type": "input_value",
                    "name": "height",
                    "check": "dom_size"
                }
            ],
            "output": "style_z_index",
            "colour": 100
        },
        {
            "key": "element_font_size",
            "message0": "%{element_font_size} %1 %{bold} %2",
            "args0": [
                {
                    "type": "input_value",
                    "name": "size",
                    "check": "dom_size"

                },
                {
                    "type": "field_checkbox",
                    "name": "bold",
                    "checked": false
                },
            ],
            "output": "style_font_size",
            "inputsInline": true,
            "colour": 100
        },
    ]

    export function init() {
        initGenerator()
        Tanslate.tr(blocks).forEach((item: any) => {
            Blockly.Blocks[item.key] = {
                init: function (this: Blockly.Block) {
                    this.jsonInit(item);
                }
            }
        })
    }

    export function getTools() {
        const domBlocks = {
            kind: 'category',
            name: Blockly.Msg['dom'],
            "colour": 100,
            contents: [] as any[]
        }
        blocks.forEach((item: any) => {
            domBlocks.contents.push({
                kind: 'block',
                type: item.key
            })
        })

        return domBlocks
    }

    function initGenerator() {
        javascriptGenerator.forBlock['element_style'] = function (block: Blockly.Block) {
            return block.getFieldValue('value');
        }
        javascriptGenerator.forBlock['element_attribute'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const val = getValue(block, generator, 'value') || '';
            return val
        }
        javascriptGenerator.forBlock['attribute_selector'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const attribute = getValue(block, generator, 'attribute');
            const val = getValue(block, generator, 'value');
            if (!attribute || !val) throw new Error(block.id);
            return `"[${attribute}=${val}]"`
        }
        javascriptGenerator.forBlock['get_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const val = getValue(block, generator, 'condition');
            if (!val) throw new Error(block.id);
            return `document.querySelector(${val.trim()})`;
        }
        javascriptGenerator.forBlock['show_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const show = getValue(block, generator, 'show');
            if (!element) throw new Error(block.id);
            return `${element}.style.display = "${show === 'TRUE' ? 'block' : 'none'}";`;
        }
        javascriptGenerator.forBlock['show_element_with_var'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const show = getValue(block, generator, 'show');
            if (!element || !show) throw new Error(block.id);
            return `${element}.style.display = ${show}? 'block' : 'none';`;
        }
        javascriptGenerator.forBlock['get_element_all'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const val = getValue(block, generator, 'condition');
            if (!val) throw new Error(block.id);
            return `document.querySelectorAll(${val?.trim()})`;
        }
        javascriptGenerator.forBlock['set_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const attribute = getValue(block, generator, 'attribute');
            const value = getValue(block, generator, 'value');
            if (attribute === 'style') {
                return `Object.assign(${element}.style,${value});\n`
            }
            if (!element || !attribute) {
                throw new Error(block.id);
            }
            if (attribute === 'innerHTML' || attribute === 'innerText') {
                return `(${element}.shadowRoot||${element}).${attribute} = ${value};\n`
            }
            if (attribute === 'width' || attribute === 'height') {
                return `${element}.${attribute} = ${parseFloat(value || '0') || value};\n`
            }
            return `${element}.${attribute} = ${value};\n`
        }
        javascriptGenerator.forBlock['get_element_attribute'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const attribute = getValue(block, generator, 'attribute');
            if (!element || !attribute) {
                throw new Error(block.id);
            }

            return `${element}.${attribute}`;
        }
        javascriptGenerator.forBlock['element_type'] = function (block: Blockly.Block) {
            const val = block.getFieldValue('value');
            return `"${val}"`
        }

        javascriptGenerator.forBlock['remove_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            if (!element) {
                throw new Error(block.id);
            }
            return `${element}.remove();\n`
        }

        javascriptGenerator.forBlock['new_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'value');
            if (!element) {
                throw new Error(block.id);
            }
            return `document.createElement(${element})`
        }

        javascriptGenerator.forBlock['set_shadow_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'value');
            const open = getValue(block, generator, 'open');
            if (!element) {
                throw new Error(block.id);
            }
            return `${element}.attachShadow({mode: "${open}"});\n${element}.setAttribute('data-shadow-root', 'true');\n`
        }

        javascriptGenerator.forBlock['insert_element'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const father = getValue(block, generator, 'father');
            const child = getValue(block, generator, 'child');
            if (!father || !child) {
                throw new Error(block.id);
            }
            return `(${father}.shadowRoot||${father}).appendChild(${child});\n`
        }

        javascriptGenerator.forBlock['dom_size'] = function (block: Blockly.Block) {
            const value = getValue(block, javascriptGenerator, 'value');
            const unit = getValue(block, javascriptGenerator, 'unit');
            return `${value}${unit}`
        }

        javascriptGenerator.forBlock['element_border'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const color = getValue(block, generator, 'color')
            const top = getValue(block, generator, 'top');
            const bottom = getValue(block, generator, 'bottom');
            const left = getValue(block, generator, 'left');
            const right = getValue(block, generator, 'right');
            return `{borderColor: ${color || '"none"'}, borderWidth: '${top} ${right} ${bottom} ${left}'}`
        }

        javascriptGenerator.forBlock['element_radius'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const top = getValue(block, generator, 'top');
            const bottom = getValue(block, generator, 'bottom');
            const left = getValue(block, generator, 'left');
            const right = getValue(block, generator, 'right');
            return `{borderRadius:'${top} ${right} ${bottom} ${left}'}`
        }

        javascriptGenerator.forBlock['element_color'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const color = getValue(block, generator, 'color');
            const background = getValue(block, generator, 'background');
            return `{background: ${background || '"none"'}, color: ${color || '"none"'}}`
        }

        javascriptGenerator.forBlock['element_padding'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const top = getValue(block, generator, 'top');
            const bottom = getValue(block, generator, 'bottom');
            const left = getValue(block, generator, 'left');
            const right = getValue(block, generator, 'right');
            return `{padding:'${top} ${right} ${bottom} ${left}'}`
        }

        javascriptGenerator.forBlock['element_margin'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const top = getValue(block, generator, 'top');
            const bottom = getValue(block, generator, 'bottom');
            const left = getValue(block, generator, 'left');
            const right = getValue(block, generator, 'right');
            return `{margin:'${top} ${right} ${bottom} ${left}'}`
        }

        javascriptGenerator.forBlock['element_position'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const type = getValue(block, generator, 'type');
            const top = getValue(block, generator, 'top');
            const bottom = getValue(block, generator, 'bottom');
            const left = getValue(block, generator, 'left');
            const right = getValue(block, generator, 'right');
            return `{position:'${type}', top:'${top}', bottom:'${bottom}', left:'${left}', right:'${right}'}`
        }

        javascriptGenerator.forBlock['element_display'] = function (block: Blockly.Block) {
            const value = block.getFieldValue('value');
            return `{display:'${value}'}`
        }

        javascriptGenerator.forBlock['element_display_flex'] = function (block: Blockly.Block) {
            const justify_items = getValue(block, javascriptGenerator, 'justify_items');
            const align_items = getValue(block, javascriptGenerator, 'align_items');
            const justify_content = getValue(block, javascriptGenerator, 'justify_content');
            const align_content = getValue(block, javascriptGenerator, 'align_content');
            const flex_direction = getValue(block, javascriptGenerator, 'flex_direction');
            return `{justifyItems:'${justify_items}', alignItems:'${align_items}', justifyContent:'${justify_content}', alignContent:'${align_content}', flexDirection:'${flex_direction}'}`
        }

        javascriptGenerator.forBlock['element_display_grid'] = function (block: Blockly.Block) {
            const value = block.getFieldValue('value');
            return `{gridTemplateColumns:'repeat(${value}, minmax(0, 1fr))'}`
        }

        javascriptGenerator.forBlock['element_call'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const name = getValue(block, generator, 'name');
            const args = getValue(block, generator, 'args');
            if (!element) {
                throw new Error(block.id);
            }
            return `${element}.${name}(...${args || '[]'})`
        }

        javascriptGenerator.forBlock['element_event'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const element = getValue(block, generator, 'element');
            const event = getValue(block, generator, 'event');
            const args = getValue(block, generator, 'args');
            if (!element) {
                throw new Error(block.id);
            }
            let body = block.getInputTargetBlock('body0');
            let lines = ''
            if (body) {
                const line = generator.blockToCode(body)
                lines = (typeof line === 'string' ? line : line.join('\n'))
            }
            return `${element}.addEventListener('${event}', async (${args}) => {\n${lines}\n});\n`
        }

        javascriptGenerator.forBlock['element_event_object'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            const key = getValue(block, generator, 'key');
            if (!value) {
                throw new Error(block.id);
            }
            return `${value}.${key}`
        }

        javascriptGenerator.forBlock['get_computed_style'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            if (!value) {
                throw new Error(block.id);
            }
            return `getComputedStyle(${value})`
        }

        javascriptGenerator.forBlock['get_bounding_rect'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            if (!value) {
                throw new Error(block.id);
            }
            return `${value}.getBoundingClientRect()`
        }

        javascriptGenerator.forBlock['bounding_rect'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            const key = getValue(block, generator, 'key');
            if (!value) {
                throw new Error(block.id);
            }
            return `${value}.${key}`
        }

        javascriptGenerator.forBlock['style_opacity'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{opacity:'${value}'}`
        }

        javascriptGenerator.forBlock['style_visibility'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{visibility:'${value}'}`
        }

        javascriptGenerator.forBlock['style_z_index'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{zIndex:'${value}'}`
        }

        javascriptGenerator.forBlock['style_overflow'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{overflow:'${value}'}`
        }

        javascriptGenerator.forBlock['style_filter'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{filter:'${value}'}`
        }

        javascriptGenerator.forBlock['backdrop_filter'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const value = getValue(block, generator, 'value');
            return `{backdropFilter:'${value}'}`
        }

        javascriptGenerator.forBlock['element_object'] = function () {
            return `document`
        }

        javascriptGenerator.forBlock['element_body'] = function () {
            return `document.body`
        }

        javascriptGenerator.forBlock['element_title'] = function () {
            return `document.title`
        }

        javascriptGenerator.forBlock['style_size'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const width = getValue(block, generator, 'width');
            const height = getValue(block, generator, 'height');
            if (!width || !height) {
                throw new Error(block.id);
            }
            return `{width:'${width}', height:'${height}'}`
        }

        javascriptGenerator.forBlock['element_font_size'] = function (block: Blockly.Block, generator: JavascriptGenerator) {
            const size = getValue(block, generator, 'size');
            const bold = getValue(block, generator, 'bold');
            if (!size) {
                throw new Error(block.id);
            }
            return `{fontSize:'${size}', fontWeight:'${bold==='TRUE' ? 'bold' : 'normal'}'}`
        }
    }

} 